<template>
    <div id="app">
        <!--  渲染数据 -->
        <ul class="catagtory">
            <li
                v-for="item in channels"
                :class="{ select: item.id === selectId }"
                :key="item.id"
                @click="getArticles(item.id)"
            >
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    data: function () {
        return {
            selectId: null,
        };
    },
    async created() {
        // 请求数据 -> 调用actions
        await this.$store.dispatch("channels/getChannels"); //异步
        // 获取文章列表接口
        this.selectId = this.channels[0].id;
        this.$store.dispatch("articles/getArticles", this.channels[0].id); // dispatch -> actions
    },
    computed: {
        // 拿取数据
        ...mapState("channels", ["channels"]),
    },
    methods: {
        getArticles(id) {
            this.selectId = id;
            this.$store.dispatch("articles/getArticles", id);
        },
    },
};
</script>

<style></style>
